<template>
    <div class="form-design-first" ref="first">
        <div class="form-design-first-main">
            <div>
                <span><span>*</span>审批名称</span>
                <div>
                    <el-input v-model.trim="name" @keydown.enter.native="checkRepeatName" @blur="checkRepeatName" maxLength="8" placeholder="请填写（必填）"></el-input>
                    <span v-if="noName" class="error">审批名称不能为空</span>
                    <span v-if="repeatName && !noName" class="error">审批名字已存在</span>
                </div>
            </div>
            <div>
                <span><span>*</span>选择分组</span>
                <div>
                    <el-select v-model="groupID" placeholder="请选择">
                        <el-option
                              v-for="item in group"
                              :key="item.id"
                              :label="item.name"
                              :value="item.id">
                        </el-option>
                    </el-select>
                    <span v-if="noGroupID" class="error">请选择分组</span>
                </div>
            </div>
            <!-- <div>
                <span><span>*</span>谁可以发起审批</span>
                <div>
                    <el-input :value="choicePeople.map(item=>item.name).toString()" readonly></el-input>
                    <span v-if="choicePeople.length<=0" class="error">请选择谁可以发起审批</span>
                </div>
                <span @click="visualRangeView=true">选择</span>
            </div> -->
            <div>
                <span style="line-height:50px;">使用图标</span>
                <div>
                    <img
                        v-if="iconArr.length>0"
                        :src="BASE_URL+icon_path"
                        alt="选中的审批图标" />
                    <span @click="chooseIconView=true">选择图标</span>
                </div>
            </div>
            <div>
                <span>审批说明</span>
                <div>
                    <el-input v-model="examineExplain" placeholder="100个字符以内" maxlength="100"></el-input>
                </div>
            </div>
        </div>

        <!-- 选择图标 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'选择图标'"
            :visible.sync="chooseIconView"
            width="550px">
            <div class="chooseIcon clear">
                <i :class="{active:item.id==preIcon}" @click="preIcon=item.id" v-for="(item,key) in iconArr" :key="key">
                    <img :src="BASE_URL+item.path" :alt="item.name" />
                </i>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="preIcon=activeIcon,chooseIconView=false">取消</el-button>
                <el-button @click="activeIcon=preIcon,chooseIconView=false" type="primary">确定</el-button>
            </div>
        </el-dialog>

        <!-- 选择谁可以发起审 -->
        <el-dialog
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :title="'可见范围'"
            :visible.sync="visualRangeView"
            width="400px">
            <div class="checkRange clear">
                <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <div style="margin: 15px 0;"></div>
                <el-checkbox-group v-model="preChoicePeople" @change="handleChoicePeopleChange">
                    <el-checkbox v-for="(item,key) in people" :label="item" :key="key">{{item.name}}</el-checkbox>
                </el-checkbox-group>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancelChoosePeople">取消</el-button>
                <el-button @click="affirmChoicePeople" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
    export default {
        props:['examineModel'],
        name:'first',
        data(){
            return {
                name:'',   // 新建审批单的名字
                noName:false,   // 审批单的没有名字时为true
                repeatName:false,   // 审批单名字已存在时值为true
                chooseIconView:false,   // 控制选择图片弹窗的显隐
                activeIcon:19,   // 被选中的图标id(默认19)
                preIcon:19,   // 预选的图标id
                visualRangeView:false,   // 控制选择谁可以发起审批弹窗的显隐
                checkAll: false,    // 值为true时代表全选
                choicePeople: [],    // 已选可以发起审批的人的数组
                preChoicePeople: [],    // 预选可以发起审批的人的数组
                people: [],   // 谁可以发起审批的选项数组
                isIndeterminate: false,   // 负责全选的样式控制
                group:[],   // 存放分组信息 
                groupID:'',   // 已选的分组id值
                noGroupID:false,   // 未选分组id值时为true
                examineExplain:'',   // 审批说明
                iconArr:[],   // 可选择的审批图标
            }
        },
        created(){
            
        },
        computed:{
            icon_path(){
                let arr = this.iconArr;
                for(let i=0;i<arr.length;i++){
                    if(arr[i].id==this.activeIcon){
                        return arr[i].path
                    }
                }
            }
        },  
        mounted(){
            this.getGroup();
            this.getIcon();
            this.getRoleList();
        },
        methods:{
            // 检测本页是否有修改过信息
            checkStatus(){
                if(this.name!='' || this.choicePeople.length==0 || this.activeIcon!=19 || this.examineExplain!=''){
                    return false
                }else{
                    return true
                }
            },
            // 发送请求检测名字是否已存在
            checkRepeatName(){
                let listParam = {
                    name: this.name   // 新建审批单的名字
                }

                if(this.$route.query.id!==undefined){
                    listParam.id = this.$route.query.id;
                }

                let success = (res=>{
                    if(res.status=='success'){
                        this.repeatName = false;
                    }else{
                        this.repeatName = true;
                    }
                })

                let fail = ( data => {
                    this.repeatName = true;
                })

                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/examine/checkExamineFormworkName',{params: listParam,func:{success:success,fail:fail}})
            },
            // 全选
            handleCheckAllChange(val) {
                this.preChoicePeople = val ? this.people.map(item=>item) : [];
                this.isIndeterminate = false;
            },
            // 选择单独一个
            handleChoicePeopleChange(value) {
                let choiceCount = value.length;
                this.checkAll = choiceCount === this.people.length;
                this.isIndeterminate = choiceCount > 0 && choiceCount < this.people.length;
            },
            // 取消本次选择的可发起审批的人
            cancelChoosePeople(){
                this.preChoicePeople = this.choicePeople.map(item=>item);
                this.checkAll = this.choicePeople.length === this.people.length;
                this.isIndeterminate = this.choicePeople.length > 0 && this.choicePeople.length < this.people.length;
                this.visualRangeView = false;
            },
            // 确认本次选择的可发起审批的人
            affirmChoicePeople(){
                this.choicePeople = this.preChoicePeople.map(item=>item);
                this.checkAll = this.choicePeople.length === this.people.length;
                this.isIndeterminate = this.choicePeople.length > 0 && this.choicePeople.length < this.people.length;
                this.visualRangeView = false;
                
            },
            // 获取分组
            getGroup(){
                let listParam = {}

                let success = (res=>{
                    let data = res.data;
                    this.group = data;
                })

                let fail = ( data => {})

                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/examine/examineCate',{params: listParam,func:{success:success,fail:fail}})
            },
            // 获取审批单图标
            getIcon(){
                let listParam = {}

                let success = (res=>{
                    let data = res.data;
                    this.iconArr = data;
                })

                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/examine/examineIcon',{params: listParam,func:{success:success,fail:fail}})
            },
            // 获取角色列表
            getRoleList(){
                let listParam = {
                    status:1,   // 状态（1：正常；0：已删除）
                }

                let success = (res=>{
                    let data = res.data;
                    this.choicePeople = this.preChoicePeople = data.map(item=>item);
                    this.checkAll = true;
                    this.people = data;
                })

                let fail = ( data => {})
                //执行请求，并将回调方法变成config成员以便鉴权过期可以执行
                this.$ajax.get('/api/role/examineRoleGet',{params: listParam,func:{success:success,fail:fail}})
            },
            // 发布时执行的方法，用于检测表单有没有错误 
            submit(){
                if(!this.groupID > 0 || !this.name){
                    if(!this.name){
                        this.noName = true;
                    }

                    if(!this.groupID > 0){
                        this.noGroupID = true;
                    }

                    return false
                }

                if(this.repeatName){
                    return false
                }

                var params = {
                    name:this.name,   // 审批名称
                    cate_id:this.groupID,   // 分组id
                    // role_id:this.choicePeople.map(item=>item.id),   // 角色的id（一维数组）
                    icon_id:this.activeIcon,   // 图标的id
                    create_id:JSON.parse(sessionStorage.getItem('user_info_str')).id,   // 创建人id
                    profile:this.examineExplain,   // 审批说明
                };

                return params;
            }
        },
        watch:{
            name(newVal,oldVal){
                if(!newVal){
                    this.noName = true;
                }else{
                    this.noName = false;
                }
            },
            groupID(newVal,oldVal){
                if(!newVal){
                    this.noGroupID = true;
                }else{
                    this.noGroupID = false;
                }
            },
            examineModel(newVal,oldVal){
                if(newVal && this.$route.query.model === 'no'){
                    this.name = newVal.name;   // 新建审批单的名字
                    this.activeIcon = newVal.icon_id;   // 被选中的图标id(默认19)
                    this.preIcon = newVal.icon_id;   // 预选的图标id
                    this.groupID = newVal.cate_id;   // 已选的分组id值
                    this.examineExplain = newVal.profile;   // 审批说明
                }
            }
        }
    }
</script>

<style lang="scss">
    .form-design-first{
        padding-top:50px;
        .form-design-first-main{
            margin:0 auto;
            padding:40px 130px 0;
            width:740px;
            height:414px;       
            background: #fff;
            >div {
                display: flex;
                align-items: center;
                margin-bottom: 30px;
                >span {
                    width: 140px;
                    font-size: 14px;
                    color: #333333;
                    >span{
                        margin-right:5px;
                        font-size:12px;
                        color:red;
                        transform:scaleY(0.8);
                    }
                    &:last-child{
                        margin:0 10px 0 20px;
                        width:30px;
                        text-align:right;
                        color:#348EFC;
                        cursor:pointer;
                    }
                }

                >div {
                    position:relative;
                    flex:1;
                    max-height:50px;
                    &.error{
                        border-color:red;
                    }
                    img{
                        width:50px;
                        height:50px;
                        object-fit:cover;
                        background: #BFEAFF;
                        border-radius: 4px;
                    }
                    >span{
                        font-family: MicrosoftYaHei;
                        position:relative;
                        top:-18px;
                        left:20px;
                        font-size: 14px;
                        line-height:50px;
                        color: #348EFC;
                        letter-spacing: 0.11px;
                        cursor:pointer;
                    }
                    .error{
                        position:absolute;
                        top:35px;
                        left:0;
                        color:red;
                        line-height:1;
                        cursor:auto;
                    }

                }
            }
        }
        
        .el-dialog__wrapper{
            .el-dialog{
                // 选择图标弹窗
                .chooseIcon{
                    margin-top:35px;
                    >i{
                        float:left;
                        margin-right:8px;
                        margin-bottom:18px;
                        width:50px;
                        height:50px;
                        border: 2px solid transparent;
                        border-radius: 4px;
                        cursor:pointer;
                        &.active{
                            border-color: #348EFC;
                        }
                        &:nth-child(8n){
                            margin-right:0;
                        }
                        >img{
                            width:50px;
                            height:50px;
                            object-fit:cover;
                            background: #D5F1FF;
                            border-radius: 4px;
                        }
                    }
                }

                // 选择范围
                .checkRange{
                    margin-bottom:20px;
                    .el-checkbox{
                        margin-left:5px;
                    }
                    .el-checkbox-group{
                        padding-left: 30px;
                        overflow:hidden;
                        .el-checkbox{
                            margin-bottom:8px;
                            width:98px;
                            overflow:hidden;
                            .el-checkbox__input{
                                float:left;
                                margin-top:3px;
                                width:14px;
                            }
                            .el-checkbox__label{
                                overflow:hidden;
                                padding-left:5px;
                                width:75px;
                                height:20px;
                                white-space:nowrap;
                                text-overflow:ellipsis;
                            }
                        }
                    }
                }
            }
        }
    }

</style>